extends layout
append scripts
    script.
        // Web 的运作原理: 一次 HTTP 请求对应一个页面
        // 如果要让用户留在当前页面中, 同时发出新的 HTTP 请求, 就必须用 JS 发送这个新请求, 接收到数据后, 再用 JS 更新页面, 用户就感觉自己仍然停留在当前页面
        // 当创建了 XMLHttpRequest 对象后, 要先设置 onreadystatechange 的回调函数,
        // 在回调函数中, 通常我们只需通过 readyState === 4 判断请求是否完成, 如果已完成, 再根据 status === 200 判断是否是一个成功的响应
        // XMLHttpRequest 对象的 open() 方法有 3 个参数, 第一个指定 GET, POST, 第二个指定 URL 地址, 第三个参数指定是否使用异步, 默认是 true
        // 千万不要把第三个参数指定为 false, 否则浏览器将停止响应, 直到 AJAX 请求完成, 如果这个请求耗时 10 秒, 那么 10 秒内你会发现浏览器处于假死状态
        // 最后调用 send() 方法才真正发送请求, GET 请求不需要参数, POST 请求需要把 body 部分以字符串或者 FormData 对象传进去
        function success(text) { var textarea = document.getElementById('test-response-text'); textarea.value = text; }
        function fail(code) { var textarea = document.getElementById('test-response-text'); textarea.value = 'Error code: ' + code; }
        var request = new XMLHttpRequest();  // 在现代浏览器上写 AJAX 主要依靠 XMLHttpRequest 对象
        request.onreadystatechange = function () {  // 状态发生变化时, 函数被回调
            if (request.readyState === 4) {  // 成功完成
                if (request.status === 200) { return success(request.responseText); }  // 成功, 通过 responseText 拿到响应的文本
                else { return fail(request.status); }  // 失败, 根据响应码判断失败原因
            } else {
                // HTTP请求还在继续...
            }
        }
        request.open('GET', '/api/categories');  // 发送请求
        request.send();
        alert('请求已发送, 请等待响应...');
        // 安全限制: 默认情况下, JavaScript 在发送 AJAX 请求时, URL 的域名必须和当前页面完全一致, 域名, 协议, 端口都要相同
        // 请求外域方法:
        // 一是通过 Flash 插件发送 HTTP 请求, 这种方式可以绕过浏览器的安全限制, 但必须安装 Flash, 并且跟 Flash 交互
        // 不过Flash用起来麻烦, 而且现在用得也越来越少了
        // 二是通过在同源域名下架设一个代理服务器来转发, JavaScript 负责把请求发送到代理服务器
        // '/proxy?url=http://www.sina.com.cn'
        // 代理服务器再把结果返回, 这样就遵守了浏览器的同源策略, 这种方式麻烦之处在于需要服务器端额外做开发
        // 第三种方式称为 JSONP, 它有个限制, 只能用 GET 请求, 并且要求返回 JavaScript, 这种方式跨域实际上是利用了浏览器允许跨域引用 JavaScript 资源
        // 如果浏览器支持 HTML5, 那么就可以一劳永逸地使用新的跨域策略; CORS
        // CORS 全称 Cross-Origin Resource Sharing,  是 HTML5 规范定义的如何跨域访问资源
block content
    button(type="button" onclick="run_js('online-run-code-1', this)")  Run
    textarea#test-response-text(rows="5" style="width: 90%; margin: 15px 0; resize: none;") 响应结果：
